<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>学员信息表</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body{
            padding-bottom: 30px;
        }
        .container{
            width: 1100px;
            margin: 0 auto;
        }
        .top{
            background: #cccccc8c;
            padding-top: 60px;
            padding-bottom: 60px;
            text-align: center;
        }
        .add{
            padding-top: 30px;
        }
        .add h2{
            padding-bottom: 20px;
        }
        #n,#s,#btn,#a{
            width: 250px;
            height: 35px;
            border-radius: 5px;
            margin-right: 20px;
            padding-left: 10px;
            outline: none;
        }
        #btn{
            margin-right: 0;
            background: #007bff;
            color: #fff;
            border: none;
        }
        .lieb{
            margin-top: 30px;
        }
        .lieb-inner{
            padding-top: 20px;
        }
        li{
            list-style: none;
            border: 1px solid #ccc;
            padding-top: 10px;
            padding-bottom: 10px;
        }
        li span{
            width:360px;
            display: inline-block;
        }
        li span:nth-child(1){
            padding-left: 10px;
        }
        #list li span:nth-child(2){
            padding-left: 10px;
        }
        #list li span:nth-child(3){
            padding-left: 14px;
        }
    </style>
</head>
<body>
    <div class="top">
        <h1>学员信息表</h1>
        <p>1803</p>
    </div>
    <div class="add">
        <div class="container">
            <h2>添加</h2>
            <input type="text" id="n" placeholder="姓名">
            <select id="s">
                <option value="男">男</option>
                <option value="女">女</option>
            </select>
            <input type="number" id="a" placeholder="年龄">
            <button id="btn">添加</button>
        </div>
    </div>
    <div class="lieb">
        <div class="container">
            <h2>列表</h2>
            <ul class="lieb-inner">
                <li>
                    <span>姓名</span>
                    <span>性别</span>
                    <span>年龄</span>
                </li>
            </ul>
            <ul id="list">

            </ul>
        </div>
    </div>
    
    
    <script>
        function loadXMLDoc(){
            var xmlhttp;
            if (window.XMLHttpRequest){
                //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
                xmlhttp=new XMLHttpRequest();
            }else{
                // IE6, IE5 浏览器执行代码
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange=function(){
                if (xmlhttp.readyState==4 && xmlhttp.status==200){
                    var json = JSON.parse(xmlhttp.responseText);
                    console.log(json.data);
                    for(let i = 0;i<json.data.length;i++){
                        var li = document.createElement("li");

                        var spanName = document.createElement("span");
                        spanName.innerHTML = json.data[i].studentName;

                        var spanSex = document.createElement("span");
                        spanSex.innerHTML = json.data[i].sex;

                        var spanAge = document.createElement("span");
                        spanAge.innerHTML = json.data[i].age;

                        li.appendChild(spanName);
                        li.appendChild(spanSex);
                        li.appendChild(spanAge);

                        document.querySelector("#list").appendChild(li);
                    }
                }
            }
            xmlhttp.open("GET","http://localhost/ajaxApi/public/index.php/index/student/student",true);
            xmlhttp.send();
        }
        loadXMLDoc();

        document.querySelector("#btn").addEventListener("click",function(){
            // 获取姓名
            var n = document.querySelector("#n").value;
            console.log(n)
            // 获取性别
            var s = document.querySelector("#s").value;
            console.log(s)
            // 获取年龄
            var a = document.querySelector("#a").value;
            console.log(a)


            // ajax代码
            var xmlhttp;
	        if (window.XMLHttpRequest){
		        //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
		        xmlhttp=new XMLHttpRequest();
	        }else{
		        // IE6, IE5 浏览器执行代码
		        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	        }
	        xmlhttp.onreadystatechange=function(){
		        if (xmlhttp.readyState==4 && xmlhttp.status==200){
                    document.querySelector("#list").innerHTML="";
                    loadXMLDoc();
			        console.log(xmlhttp.responseText);
		        }
	        }
	        xmlhttp.open("GET","http://localhost/ajaxApi/public/index.php/index/student/addStudent?studentName="+n+"&sex="+s+"&age="+a,true);
	        xmlhttp.send();

        })


        
    </script>
</body>
</html>